import { useState } from 'react';
import PropTypes from 'prop-types';
function Counter({ style }) {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <button onClick={handleClick} style={style}>
        计数
      </button>{' '}
      {count}
    </div>
  );
}
Counter.propTypes = {
  style: PropTypes.element,
};
function App() {
  const [show, setShow] = useState(true);
  const handleClick = () => {
    setShow(!show);
  };
  return (
    <div>
      hello App
      <button onClick={handleClick}>切换显示隐藏</button>
      {/* {show && <Counter />} */}
      {/* {show ? (
        <Counter style={{ border: '1px red solid' }} key="con1" />
      ) : (
        <Counter key="con2" />
      )} */}
      {show ? (
        <Counter style={{ border: '1px red solid' }} />
      ) : (
        <div>
          <Counter />
        </div>
      )}
    </div>
  );
}

export default App;
